<template>
	<view class="container">
		<!-- 导航 -->
		<view class="index-tabs">
			<view class='active' v-for="(item,index) in tabList" :key="index">
				<view :class="{texted:currentTab == index }" :data-tab="item.value" @click="switchTab(index)">
					{{item.name}}
				</view>
			</view>
			<!-- <image class="search-img" src="/static/image/Index/index-search.png" mode=""></image> -->
		</view>
		<view class="" v-show="currentTab == 0">
			<view class="nav-box" @click="$helper.to('/pages/views/findPage/findPage?dynamic_type='+'interest')">
				<view class="">
					<view class="title">
						星选动态
					</view>
					<view class="title-two">
						分享与众不同的生活
					</view>
				</view>
				<image class="right-img" src="/static/image/find/right.png" mode=""></image>
			</view>
			<view class="type-box">
				<scroll-view scroll-x class="nav" scroll-with-animation>
					<noData v-if="listOne.length < 1" :ndText="'暂无星选动态数据'"></noData>
					<view v-else class="content_model" v-for="(item,index) in listOne" :key="index"
						@click="$helper.to('/pages/views/findDetail/findDetail?id='+item.id)">
						<image :src="item.url" mode="" class="model_img"></image>
						<!-- //image=图片 video=视频 -->
						<image v-show="item.type == 'video'" class="model_time" src="/static/image/find/play.png" mode=""></image>
						<view class="model_bz">
							{{item.title}}
						</view>
						<view class="model_info">
							<image :src="item.user.avatar" mode="" class="vipimg"></image>
							<view class="info_name">{{item.user.user_nickname}}</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="nav-box">
				<view class="">
					<view class="title">
						兴趣动态
					</view>
					<view class="title-two">
						有趣的灵魂和精致的你
					</view>
				</view>
				<image class="right-img" src="/static/image/find/right.png" mode="" @click="$helper.to('/pages/views/findPage/findPage?dynamic_type='+'star')"></image>
			</view>
			<view class="type-box">
				<scroll-view scroll-x class="nav" scroll-with-animation>
					<noData v-if="listTwo.length < 1" :ndText="'暂无兴趣动态数据'"></noData>
					<view v-else class="content_model" v-for="(item,index) in listTwo" :key="index" @click="$helper.to('/pages/views/findDetail/findDetail?id='+item.id)">
						<image :src="item.url" mode="" class="model_img"></image>
						<image v-show="item.type == 'video'" class="model_time" src="/static/image/find/play.png" mode=""></image>
						<view class="model_bz">
							{{item.title}}
						</view>
						<view class="model_info">
							<image :src="item.user.avatar" mode="" class="vipimg"></image>
							<view class="info_name">{{item.user.user_nickname}}</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="nav-box">
				<view class="">
					<view class="title">
						商家动态
					</view>
					<view class="title-two">
						此刻最受欢迎的人
					</view>
				</view>
				<image class="right-img" @click="$helper.to('/pages/views/findPage/findPage?dynamic_type='+'shop')" src="/static/image/find/right.png" mode=""></image>
			</view>
			<view class="type-box">
				<scroll-view scroll-x class="nav" scroll-with-animation>
					<noData v-if="listThree.length < 1" :ndText="'暂无商家动态数据'"></noData>
					<view v-else class="content_model" v-for="(item,index) in listThree" :key="index" @click="$helper.to('/pages/views/findDetail/findDetail?id='+item.id)">
						<image :src="item.url" mode="" class="model_img"></image>
						<image v-show="item.type == 'video'" class="model_time" src="/static/image/find/play.png" mode=""></image>
						<view class="model_bz">
							{{item.title}}
						</view>
						<view class="model_info">
							<image :src="item.user.avatar" mode="" class="vipimg"></image>
							<view class="info_name">{{item.user.user_nickname}}</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="" v-show="currentTab == 1">
			<view class="type-box-find">
				<noData style="margin: 0 auto;" v-if="jxList.length < 1" :ndText="'暂无精选空间数据'"></noData>
				<view v-else class="content_model_find" v-for="(ite,ind) in jxList"
					@click="$helper.to('/pages/tabBar/index/indexInfo?id='+ite.user.id)" :key="ind">
					<image :src="ite.image" mode="" class="model_img"></image>
					<span v-show="ite.is_new_dynamic" class="model_time_index">最近有更新</span>
					<view class="model_bz">
						{{ite.name}}
					</view>
					<view class="model_info">
						<image :src="ite.user.avatar" mode="" class="vipimg"></image>
						<view class="info_name_find">
							<view class="">{{ite.user.user_nickname}}</view>
							<view class="info_name_find_bottom">
								<view class="info_name_find_bottom_left">颜值创作者</view>
								<view class="info_name_find_bottom_right">动态:{{ite.space_dynamic_num}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="" v-show="currentTab == 2">
			<view class="type-box-find">
				<noData style="margin: 0 auto;" v-if="gzList.length < 1" :ndText="'暂无关注数据'"></noData>
				<view v-else class="content_model_find" v-for="(item,index) in gzList" :key="index"
					@click="$helper.to('/pages/views/findDetail/findDetail?id='+item.id)">
					<image :src="item.url" mode="" class="model_img"></image>
					<image class="model_time" src="/static/image/find/play.png" mode=""></image>
					<view class="model_bz">
						{{item.title}}
					</view>
					<view class="model_info">
						<image :src="item.user.avatar" mode="" class="vipimg"></image>
						<view class="info_name_three">
							<view class="">{{item.user.user_nickname}}</view>
							<view class="info_name_three_bottom">
								<image class="info_name_three_bottom_left" :src="item.is_like == false ? '/static/image/find/love.png' : '/static/image/find/love_active.png'"
									mode=""></image>
								<view class="info_name_three_bottom_right">{{item.like}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import noData from '@/components/ben-components/notData/notData.vue'
	export default {
		components: {
			noData
		},
		data() {
			return {
				currentTab: 0,
				tabList: [{
						name: '精选动态',
						value: 0
					},
					{
						name: '精选空间',
						value: 1
					},
					{
						name: '关注',
						value: 2
					}
				],
				listOne:[],//星选动态
				listTwo:[],//兴趣
				listThree:[],//商家动态
				jxList:[],//精选空间
				gzList:[],//我的关注
			}
		},
		onShow() {
			this.getList();
		},
		methods: {
			// 切换
			switchTab(index) {
				this.currentTab = index;
				if(index == 0) return this.getList()
				if(index == 1) return this.getListTwo();
				if(index == 2) return this.getListThree();
			},
			// 数据列表
			getList() {
				// interest=兴趣动态 star=星选动态 shop=商家动态
				this.$http.getList({
					dynamic_type: 'interest'
				}).then(res => {
					if (res.code == '1') {
						this.listOne = res.data.data.slice(0, 6);
					}
				})
				this.$http.getList({
					dynamic_type: 'star'
				}).then(res => {
					if (res.code == '1') {
						this.listTwo = res.data.data.slice(0, 6);
					}
				})
				this.$http.getList({
					dynamic_type: 'shop'
				}).then(res => {
					if (res.code == '1') {
						this.listThree = res.data.data.slice(0, 6);
					}
				})
			},
			// 精选列表
			getListTwo(){
				this.$http.jxKj().then(res => {
					if (res.code == '1') {
						 this.jxList = res.data.data
					}
				})
			},
			// 关注
			getListThree(){
				this.$http.getList({attention:1}).then(res => {
					if (res.code == '1') {
						 this.gzList = res.data.data
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.container {
		padding: 30rpx 10rpx 30rpx 30rpx;

		.index-tabs {
			display: flex;
			align-items: center;
			position: relative;
		}

		.search-img {
			width: 31rpx;
			height: 34rpx;
			position: absolute;
			right: 30rpx;
			top: 16rpx;
		}

		.active {
			font-size: 32rpx;
			margin-right: 40rpx;
		}

		.texted {
			font-size: 40rpx;
		}

		.nav-box {
			margin-top: 30rpx;
			display: flex;
			justify-content: space-between;

			.title {
				font-weight: 500;
				font-size: 32rpx;
				color: #000000;
				line-height: 45rpx;
			}

			.title-two {
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
			}

			.right-img {
				width: 12rpx;
				height: 22rpx;
				margin: 26rpx 30rpx 0 0;
			}
		}
	}

	.type-box {
		width: 685rpx;
		margin: 0 auto;
		margin-top: 20rpx;

		.nav {
			width: 100%;
		}

		::v-deep .uni-scroll-view-content {
			display: flex;
			justify-content: space-around;
		}
	}

	.type-box-find {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-top: 20rpx;
	}

	.content_model {
		position: relative;
		height: 420rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
	}

	.content_model_find {
		position: relative;
		height: 420rpx;
		margin-bottom: 20rpx;

	}

	.model_img {
		width: 335rpx;
		height: 420rpx;
		border-top-right-radius: 16rpx;
		border-bottom-left-radius: 16rpx;
	}

	.model_time_index {
		position: absolute;
		top: 0;
		right: 0;
		font-size: 20rpx;
		text-align: center;
		width: 150rpx;
		line-height: 40rpx;
		height: 40rpx;
		border-top-right-radius: 16rpx;
		border-bottom-left-radius: 16rpx;
		color: #ffffff;
		background: rgba(0, 0, 0, 0.6);
	}

	.model_time {
		position: absolute;
		width: 36rpx;
		height: 36rpx;
		right: 20rpx;
		top: 20rpx;
		border-radius: 50%;
	}

	.model_bz {
		position: absolute;
		bottom: 80rpx;
		left: 16rpx;
		font-size: 24rpx;
		color: #FFFFFF;
		width: 296rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.model_info {
		display: flex;
		align-items: center;
		position: absolute;
		bottom: 10rpx;
		left: 12rpx;
		font-weight: 500;
	}

	.info_name {
		width: 96rpx;
		font-size: 20rpx;
		color: #fff;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.info_name_find {
		font-size: 24rpx;
		color: #FFFFFF;
	}

	.info_name_find_bottom {
		display: flex;
	}

	.info_name_find_bottom_left {
		font-weight: 400;
		font-size: 20rpx;
		color: #FEC92F;
	}

	.info_name_find_bottom_right {
		font-weight: 400;
		font-size: 20rpx;
		color: #FFFFFF;
		margin-left: 15rpx;
	}

	.info_name_three {
		display: flex;
		justify-content: space-between;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
	}

	.info_name_three_bottom {
		display: flex;
		margin-left: 90rpx;
		align-items: center;
	}

	.info_name_three_bottom_left {
		width: 24rpx;
		height: 22rpx;
		margin-right: 10rpx;
	}

	.info_name_three_bottom_right {
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
	}

	.vipimg {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		margin-right: 8rpx;
	}
</style>